<template>
  <div class="container">
    <Header :showRefresh="false" />
    <div class="page-main">
      <div class="page-main-query">
        <FilterBar>
          <template #right>
            <el-button
              type="primary"
              size="small"
              class="custom-purple"
              @click="() => openMenuEdit()"
            >
              新增菜单
            </el-button>
          </template>
        </FilterBar>
      </div>
      <div class="table-area">
        <vxe-grid
          height="100%"
          v-loading="loading"
          ref="xGrid"
          :columns="columns"
          :data="data"
          size="mini"
          border
          rowKey
          :treeConfig="{ children: 'children' }"
        >
          <template #dragBtn>
            <span class="drag-btn">
              <i class="vxe-icon--menu"></i>
            </span>
          </template>
          <template #dragTip>
            <vxe-tooltip
              v-model="showHelpTip"
              content="按住后可以上下拖动排序！"
              enterable
            >
              <i
                class="vxe-icon--question"
                @click="showHelpTip = !showHelpTip"
              />
            </vxe-tooltip>
          </template>
          <template #status="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleEditStatus(row)"
            />
          </template>
          <template #actions="{ row }">
            <el-button type="text" @click="openMenuEdit({ parentId: row.id })">
              添加下一级
            </el-button>
            <el-button type="text" @click="openMenuEdit(row, true)">
              编辑
            </el-button>
            <el-button type="text" @click="handleDelete(row)"> 删除 </el-button>
          </template>
        </vxe-grid>
      </div>
    </div>
    <menu-edit-dialog ref="dialogRef" @update-list="initMeneTree" />
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import { getMenuTree, deleteMenu, editMenu } from "@/api/system";
import MenuEditDialog from "./components/MenuEditDialog.vue";
import useDragTreeTable from "@/hooks/useDragTreeTable";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import { Search } from "@element-plus/icons-vue";
export default {
  name: "Menu",
  components: {
    FilterBar,
    MenuEditDialog,
    Header,
  },
  setup(props, content) {
    const loading = ref(false);
    const dialogRef = ref(null);
    const columns = ref([
      {
        width: 50,
        align: "center",
        slots: { default: "dragBtn", header: "dragTip" },
      },
      { field: "name", title: "菜单名称", treeNode: true },
      {
        width: 100,
        field: "status",
        title: "状态",
        slots: { default: "status" },
      },
      { width: 200, title: "操作", slots: { default: "actions" } },
    ]);
    const data = ref([]);

    /**
     * 排序实现
     * @node menuObject, 菜单节点
     * @orderNum 排序编号
     * @parentId 目标父元素id
     */
    const setOrder = async (node, orderNum, parentId) => {
      await editMenu(node.id, {
        ...node,
        orderNum,
        parentId,
      });
    };

    const { showHelpTip, xGrid, treeDrop } = useDragTreeTable(data, setOrder);

    // 初始化树形菜单
    const initMeneTree = async () => {
      loading.value = true;
      const res = await getMenuTree();
      data.value = res.data;
      loading.value = false;
    };

    // 打开菜单编辑窗口
    const openMenuEdit = (row, flag) => {
      dialogRef.value.open(row, flag);
    };

    // 删除菜单
    const handleDelete = async (row) => {
      ElMessageBox.confirm("此操作将永久删除该菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const res = await deleteMenu(row.id);
        initMeneTree();
      });
    };

    // 修改菜单状态
    const handleEditStatus = async (row) => {
      const res = await editMenu(row.id, {
        ...row,
      });
    };

    onMounted(() => {
      initMeneTree();
    });

    return {
      Search,
      xGrid,
      showHelpTip,
      loading,
      columns,
      data,
      treeDrop,
      dialogRef,
      openMenuEdit,
      handleDelete,
      handleEditStatus,
      initMeneTree,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../globle.scss";
.page-main {
  padding-bottom: 0;
}
.page-main-query {
  margin-bottom: 20px;
}
.table-area {
  height: calc(100vh - 240px);
}
</style>